<template>
	<view>
		<uv-navbar leftText="返回" title="患者信息" @leftClick="backClick"></uv-navbar>
		
		<view class="patient_class">
			<uv-text :text="patient_info.name" size="26" bold :customStyle="{padding: '20px'}"></uv-text>
			
			<uv-cell-group>
				<uv-cell>
					<!-- 自定义左侧标题 -->
					<template v-slot:title><text>处方单号</text></template>
					<!-- 自定义右侧值 -->
					<template v-slot:value><view :style="{display: 'flex'}"><uv-text text="No. " color="red" :bold="true"></uv-text>{{ patient_info.orderId }}</view> </template>
					<!-- 自定义左侧图标 -->
					<template v-slot:icon><uv-icon size="50rpx" name="order"></uv-icon></template>
				</uv-cell>
				<uv-cell v-if="userinfo.types < 3" isLink @click="showRx">
					<!-- 自定义左侧标题 -->
					<template v-slot:title><text>处方单</text></template>
					<!-- 自定义右侧值 -->
					<template v-slot:value>
						<RxUonPreview v-if="patient_info.rx_image_url" :src="patient_info.rx_image_url"><text>预览</text></RxUonPreview>
					</template>
					<!-- 自定义左侧图标 -->
					<template v-slot:icon><uv-icon size="50rpx" name="empty-search"></uv-icon></template>
				</uv-cell>
				<uv-cell>
					<!-- 自定义左侧标题 -->
					<template v-slot:title><text>患者年龄</text></template>
					<!-- 自定义右侧值 -->
					<template v-slot:value><text>{{ patient_info.age }}</text></template>
					<!-- 自定义左侧图标 -->
					<template v-slot:icon><uv-icon size="50rpx" name="account"></uv-icon></template>
				</uv-cell>
				<uv-cell>
					<!-- 自定义左侧标题 -->
					<template v-slot:title><text>患者性别</text></template>
					<!-- 自定义右侧值 -->
					<template v-slot:value><text>{{ patient_info.sex }}</text></template>
					<!-- 自定义左侧图标 -->
					<template v-slot:icon><uv-icon size="50rpx" :name="patient_info.sex==='女'?'woman':'man'"></uv-icon></template>
				</uv-cell>
				<uv-cell>
					<!-- 自定义左侧标题 -->
					<template v-slot:title><text>患者联系方式</text></template>
					<!-- 自定义右侧值 -->
					<template v-slot:value>
						<uv-text align="right" mode="phone" :format="userinfo.types === 3?'encrypt':''" :text="String(patient_info.mobile)"></uv-text>
					</template>
					<!-- 自定义左侧图标 -->
					<template v-slot:icon><uv-icon size="50rpx" name="phone"></uv-icon></template>
				</uv-cell>
				<uv-cell v-if="patient_info.visits.date.length > 0" :isLink="patient_info.visits.date.length > 1?true:false" @click="showVisitsDate">
					<!-- 自定义左侧标题 -->
					<template v-slot:title><text>复诊时间</text></template>
					<!-- 自定义右侧值 -->
					<template v-slot:value>
						<text v-if="patient_info.visits.date.length > 1">全部</text>
						<text v-else>{{ patient_info.visits.date[0].date }}</text>
					</template>
					<!-- 自定义左侧图标 -->
					<template v-slot:icon v-slot:value><uv-icon size="50rpx" name="clock"></uv-icon></template>
				</uv-cell>
				<uv-cell v-if="patient_info.visits.note" isLink @click="showVisitsNote">
					<!-- 自定义左侧标题 -->
					<template v-slot:title><text>注意事项</text></template>
					<!-- 自定义右侧值 -->
					<template v-slot:value><text>查看</text></template>
					<!-- 自定义左侧图标 -->
					<template v-slot:icon><uv-icon size="50rpx" name="empty-list"></uv-icon></template>
				</uv-cell>
				<uv-cell>
					<!-- 自定义左侧标题 -->
					<template v-slot:title><text>建单时间</text></template>
					<!-- 自定义右侧值 -->
					<template v-slot:value><text>{{ patient_info.slipCreateTime }}</text></template>
					<!-- 自定义左侧图标 -->
					<template v-slot:icon><uv-icon size="50rpx" name="empty-history"></uv-icon></template>
				</uv-cell>
				<uv-cell>
					<!-- 自定义左侧标题 -->
					<template v-slot:title><text>开单诊所</text></template>
					<!-- 自定义右侧值 -->
					<template v-slot:value><text>{{ patient_info.clinic.clinic_name }}</text></template>
					<!-- 自定义左侧图标 -->
					<template v-slot:icon><uv-icon size="50rpx" name="home"></uv-icon></template>
				</uv-cell>
				<uv-cell>
					<!-- 自定义左侧标题 -->
					<template v-slot:title><text>开单医生</text></template>
					<!-- 自定义右侧值 -->
					<template v-slot:value><text>{{ patient_info.clinic.medic_name }}</text></template>
					<!-- 自定义左侧图标 -->
					<template v-slot:icon><uv-icon size="50rpx" name="account"></uv-icon></template>
				</uv-cell>
				<uv-cell v-if="userinfo.types < 2">
					<!-- 自定义左侧标题 -->
					<template v-slot:title><text>医生联系方式</text></template>
					<!-- 自定义右侧值 -->
					<template v-slot:value><text>{{ patient_info.clinic.medic_mobile }}</text></template>
					<!-- 自定义左侧图标 -->
					<template v-slot:icon><uv-icon size="50rpx" name="phone"></uv-icon></template>
				</uv-cell>
				<uv-cell>
					<!-- 自定义左侧标题 -->
					<template v-slot:title><text>诊所地址</text></template>
					<!-- 自定义右侧值 -->
					<template v-slot:value><text>{{ patient_info.clinic.address }}</text></template>
					<!-- 自定义左侧图标 -->
					<template v-slot:icon><uv-icon size="50rpx" name="empty-address"></uv-icon></template>
				</uv-cell>
			</uv-cell-group>
			
			<!-- 复诊时间 -->
			<uv-popup ref="visitsDatePopup" closeable round="5" :customStyle="{width: '80%'}">
				<uv-text text="复诊时间" type="info" align="center" size="16" :custom-style="{marginTop:'15px',marginBottom:'15px'}"></uv-text>
				<uv-cell-group :border="false">
					<uv-cell v-for="item, index in patient_info.visits.date" :key="index">
						<!-- 自定义左侧标题 -->
						<template v-slot:title>
							<text>第{{ index + 1 }}次复诊时间</text>
						</template>
						<!-- 自定义右侧值 -->
						<template v-slot:value>
							<text>{{ item.date }}</text>
						</template>
					</uv-cell>
				</uv-cell-group>
			</uv-popup>
			
			<!-- 注意事项 -->
			<uv-popup ref="visitsNotePopup" closeable round="5" :customStyle="{width: '80%'}">
				<uv-text text="注意事项" type="info" align="center" size="16" :custom-style="{marginTop:'15px',marginBottom:'15px'}"></uv-text>
				<uv-textarea v-model="patient_info.visits.note" autoHeight border="bottom"></uv-textarea>
			</uv-popup>
			
		</view>
	</view>
</template>

<script>
	import RxUonPreview from '@/components/RxUonPreview/RxUonPreview.vue'
	export default {
		components: {
			RxUonPreview
		},
		data() {
			return {
				userinfo: {},
				patient_info: {},
				show_images: false
			}
		},
		mounted() {
			this.userinfo = this.$store.state.userinfo
		},
		onLoad: function (option) {
		    this.patient_info = JSON.parse(decodeURIComponent(option.data));
		},
		methods: {
			backClick() {
				this.patient_info = {}
				uni.navigateBack()
			},
			showRx() {
				console.log('预览处方单', this.patient_info.rx_image_url)
				this.show_images = true
			},
			showVisitsDate() {
				if (this.patient_info.visits.date.length > 1) {
					this.$refs.visitsDatePopup.open();
				}
			},
			showVisitsNote() {
				this.$refs.visitsNotePopup.open();
			}
		}
	}
</script>

<style lang="scss">
	.patient_class {
		margin-top: 80px;
	}
	
	.preview_class {
		padding: 0rpx 30rpx 0rpx 0rpx;
		display: flex;	// 使用 flex 布局
		justify-content: space-between;	// 左右两个视图分散排列
		width: 365%;
		margin-bottom: 30rpx;
		
		.preview_class_right {
			text-align: right;
		}
	}
</style>
